<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂点名系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(90deg, #4b6cb7, #182848);
            color: white;
            padding: 20px;
            text-align: center;
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .main-content {
            display: flex;
            flex-wrap: wrap;
            min-height: 500px;
        }

        .left-panel {
            flex: 1;
            min-width: 300px;
            padding: 20px;
            border-right: 1px solid #eee;
        }

        .right-panel {
            flex: 1;
            min-width: 300px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .panel-title {
            font-size: 20px;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4b6cb7;
        }

        .student-list {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
        }

        .student-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .student-item:last-child {
            border-bottom: none;
        }

        .student-name {
            font-size: 16px;
            color: #333;
        }

        .control-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .control-btn {
            flex: 1;
            min-width: 120px;
            padding: 15px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
        }

        .start-btn {
            background: linear-gradient(90deg, #00b09b, #96c93d);
            color: white;
        }

        .start-btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .stop-btn {
            background: linear-gradient(90deg, #ff416c, #ff4b2b);
            color: white;
        }

        .stop-btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .file-upload-btn {
            background: #3498db;
            color: white;
        }

        .file-upload-btn:hover {
            background: #2980b9;
        }

        .result-area {
            text-align: center;
            padding: 30px;
            width: 100%;
        }

        .result-placeholder {
            font-size: 18px;
            color: #7f8c8d;
        }

        .result-name {
            font-size: 48px;
            font-weight: bold;
            color: #e74c3c;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .student-count {
            text-align: center;
            margin-top: 15px;
            font-size: 16px;
            color: #7f8c8d;
        }

        .status-message {
            text-align: center;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }

        .error-message {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .success-message {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .file-upload-wrapper {
            position: relative;
            margin-bottom: 20px;
        }

        .file-upload-wrapper input[type="file"] {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }

        .file-upload-label {
            display: block;
            padding: 12px;
            background: #ecf0f1;
            border: 2px dashed #bdc3c7;
            border-radius: 5px;
            text-align: center;
            color: #7f8c8d;
            font-size: 16px;
            transition: all 0.3s;
        }

        .file-upload-wrapper:hover .file-upload-label {
            background: #d5dbdb;
            border-color: #95a5a6;
        }

        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }

            .left-panel {
                border-right: none;
                border-bottom: 1px solid #eee;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>🎲 课堂点名系统</h1>
        <p>上传name.txt文件进行点名</p>
    </div>

    <div class="main-content">
        <div class="left-panel">
            <h2 class="panel-title">学生名单</h2>

            <div id="statusMessage" class="status-message" style="display: none;"></div>

            <div class="file-upload-wrapper">
                <input type="file" id="fileInput" accept=".txt">
                <label for="fileInput" class="file-upload-label">
                    点击选择name.txt文件或拖拽文件到此处
                </label>
            </div>

            <div class="student-list" id="studentList">
                <div class="empty-list">请上传name.txt文件</div>
            </div>

            <div class="student-count">
                总学生数: <span id="totalCount">0</span> 人
            </div>

            <div class="control-buttons">
                <button class="control-btn start-btn" id="startRoll" disabled>开始点名</button>
                <button class="control-btn stop-btn" id="stopRoll" disabled>停止点名</button>
            </div>
        </div>

        <div class="right-panel">
            <h2 class="panel-title">点名结果</h2>

            <div class="video-container" style="width: 100%; max-width: 500px; margin-bottom: 20px;">
                <video id="rollVideo" width="100%" height="200" controls style="display: none;">
                    <source src="" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>

            <div class="result-area">
                <div class="result-placeholder" id="resultPlaceholder">点击"开始点名"按钮开始</div>
                <div class="result-name" id="resultName" style="display: none;"></div>
            </div>
        </div>
    </div>
</div>

<script>        // 学生列表
let students = [];
let rollInterval = null;
let isRolling = false;
// DOM元素
const fileInput = document.getElementById('fileInput');
const studentList = document.getElementById('studentList');
const totalCount = document.getElementById('totalCount');
const startRollBtn = document.getElementById('startRoll');
const stopRollBtn = document.getElementById('stopRoll');
const resultPlaceholder = document.getElementById('resultPlaceholder');
const resultName = document.getElementById('resultName');
const statusMessage = document.getElementById('statusMessage');
const rollVideo = document.getElementById('rollVideo'); // 新增视频元素
rollVideo.src = "1.mp4";

// 当视频播放结束时自动停止点名
rollVideo.addEventListener('ended', function() {
    if (isRolling) {
        stopRoll();
    }
});

// 读取上传的文件
function handleFile(file) {
    // 停止当前的滚动点名（如果正在进行）
    if (isRolling) {
        stopRoll();
    }

    // 重置界面
    resultPlaceholder.style.display = 'block';
    resultName.style.display = 'none';
    resultName.textContent = '';

    const reader = new FileReader();

    reader.onload = function(e) {
        try {
            // 按行分割文本并过滤空行
            students = e.target.result.split('\n')
                .map(name => name.trim())
                .filter(name => name.length > 0);

            if (students.length === 0) {
                showMessage('文件中没有找到学生数据', 'error');
                studentList.innerHTML = '<div class="empty-list">文件中没有学生数据</div>';
                startRollBtn.disabled = true;
            } else {
                showMessage(`成功加载 ${students.length} 名学生`, 'success');
                renderStudentList();
                startRollBtn.disabled = false;
            }

            totalCount.textContent = students.length;
        } catch (error) {
            console.error('解析文件时出错:', error);
            showMessage('解析文件时出错: ' + error.message, 'error');
            studentList.innerHTML = '<div class="empty-list">文件解析失败</div>';
            students = [];
            totalCount.textContent = '0';
            startRollBtn.disabled = true;
        }
    };

    reader.onerror = function() {
        showMessage('读取文件时出错', 'error');
        studentList.innerHTML = '<div class="empty-list">文件读取失败</div>';
        students = [];
        totalCount.textContent = '0';
        startRollBtn.disabled = true;
    };

    reader.readAsText(file, 'UTF-8');
}

// 显示状态消息
function showMessage(message, type) {
    statusMessage.textContent = message;
    statusMessage.className = 'status-message ' + type + '-message';
    statusMessage.style.display = 'block';

    // 3秒后自动隐藏消息
    setTimeout(() => {
        statusMessage.style.display = 'none';
    }, 3000);
}

// 渲染学生列表
function renderStudentList() {
    if (students.length === 0) {
        studentList.innerHTML = '<div class="empty-list">暂无学生数据</div>';
        totalCount.textContent = '0';
        return;
    }

    let html = '';
    students.forEach((student, index) => {
        html += `                    <div class="student-item">
                        <span class="student-name">${index + 1}. ${student}</span>
                    </div>
                `;
    });

    studentList.innerHTML = html;
    totalCount.textContent = students.length;
}

// 开始滚动点名
function startRoll() {
    if (students.length === 0) {
        alert('学生名单为空');
        return;
    }

    if (isRolling) return;

    isRolling = true;
    startRollBtn.disabled = true;
    stopRollBtn.disabled = false;
    resultPlaceholder.style.display = 'none';
    resultName.style.display = 'block';

    // 显示并播放视频
    rollVideo.style.display = 'block';
    rollVideo.currentTime = 0; // 重置视频到开头
    rollVideo.play();

    // 随机点名
    rollInterval = setInterval(() => {
        const randomIndex = Math.floor(Math.random() * students.length);
        resultName.textContent = students[randomIndex];
    }, 100);
}

// 停止滚动点名
function stopRoll() {
    if (!isRolling) return;

    clearInterval(rollInterval);
    isRolling = false;
    startRollBtn.disabled = false;
    stopRollBtn.disabled = true;

    // 停止并隐藏视频
    rollVideo.pause();
    rollVideo.currentTime = 0;
}

// 事件监听
fileInput.addEventListener('change', function(e) {
    if (e.target.files.length > 0) {
        handleFile(e.target.files[0]);
        // 重置文件输入，允许选择同一个文件
        e.target.value = '';
    }
});

startRollBtn.addEventListener('click', startRoll);
stopRollBtn.addEventListener('click', stopRoll);

// 拖拽上传功能
const fileUploadWrapper = document.querySelector('.file-upload-wrapper');

fileUploadWrapper.addEventListener('dragover', function(e) {
    e.preventDefault();
    this.querySelector('.file-upload-label').style.background = '#d5dbdb';
    this.querySelector('.file-upload-label').style.borderColor = '#3498db';
});

fileUploadWrapper.addEventListener('dragleave', function(e) {
    e.preventDefault();
    this.querySelector('.file-upload-label').style.background = '#ecf0f1';
    this.querySelector('.file-upload-label').style.borderColor = '#bdc3c7';
});

fileUploadWrapper.addEventListener('drop', function(e) {
    e.preventDefault();
    this.querySelector('.file-upload-label').style.background = '#ecf0f1';
    this.querySelector('.file-upload-label').style.borderColor = '#bdc3c7';

    if (e.dataTransfer.files.length > 0) {
        handleFile(e.dataTransfer.files[0]);
    }
});
</script>
</body>
</html>
